<template>
  <div class="nav-bar" :class="{ 'is-fixed': isFixed }">
    <div class="container">
      <div class="pro-title">{{ title }}</div>
      <div class="pro-parma">
        <a href="javascript:;">概述</a><span>|</span>
        <a href="javascript:;">参数</a><span>|</span>
        <a href="javascript:;">评价</a>
        <slot name="buy"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
  },
  data() {
    return {
      isFixed: false, //默认一开始不需要定位
    };
  },
  methods: {
    initHeight() {
      // 拿到不同浏览器下的鼠标一动距离
      let scrollTop =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageXOffset;
      //准备让定位到152的位置就始终不动，
      this.isFixed = scrollTop > 152 ? true : false;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
  },
  //销毁
  destroyed() {
    // 去除刚才的移动就固定的效果，要不然别的页面也有，浪费资源最后加的false是只要不在这个页面就销毁，利用vue的冒泡机制。
    window.removeEventListener("scroll", this.initHeight, false);
  },
};
</script>

<style lang="scss">
@import "../assets/scss/config";
@import "../assets/scss/base";
@import "../assets/scss/mixin";
.nav-bar {
  height: 70px;
  line-height: 70px;
  border-top: 1px solid #e5e5e5;
  background-color: $colorG;
  z-index: 10;
  &.is-fixed {
    position: fixed; //使用固定其位置
    top: 0px;
    width: 100%;
    box-shadow: 0 5px 5px #cccccc;
  }
  .container {
    @include flex();
    .pro-title {
      font-size: $fontH;
      color: $colorB;
      font-weight: bold;
    }
    .pro-parma {
      font-size: $fontJ;
      span {
        padding: 0 10px;
      }
      a {
        color: $colorC;
        margin-right: 10px;
      }
    }
  }
}
</style>
